<html>
  <head>
    <title>HTML 文档结构</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body style="color: darkorchid">
    <div class="main">
      <div class="row">
        <input class="input" type="text" id ="inputtext" />
        <input type="button" name ="bt" value="确认1" onclick="handleClick(event)" />
        <input type="button" name ="bt" id ="button2" value="确认2"  />
      </div>
      <div id ="todogroup">
      </div>
      <div id="xx"  onmouseenter="enter('xx')" onmouseenter="leave('xx')">
        <div style="opacity: 0;">1111111111</div>
      

      </div>


      <span style="color: blue"> sad&nbsp;sad </span>
    </div>
  </body>
<script lang="javascript">
    var intCnt=0;

    function init(){
        document.getElementById("button2").onclick =handleClick;
    }
    function keyup(e){
      console.log(e);
      if(e.keyCode==13){
        handleClick();
      }
    }


    function handleClick(e){
        console.log('handleClick');
        console.log(e);

        var temp=getValue();
        var div =document.createElement('div');
        
        document.getElementById("todogroup").innerHTML +=
            "<div class ='item' id='todo'"
            +intCnt+ "'><input type = 'checkbox' name = 'todocheck'><div class='item-value'>"
            + temp+ "</div><button class ='item-del' type ='button' onclick ='deletByIndex("
            +intCnt+")'>删除</button></div>";
        document.getElementById("inputtext").value="";
        intCnt++;


    }

    function getValue(){
        var temp = document.getElementById("inputtext");
        console.log(temp.value);

        return temp.value;
    }

    function deletByIndex(index){
        document.getElementById("todogroup"+index).remove();
    }
    function enter(id){
    document.getElementById(id).style='background-color:#3e3e3e';
  }
    function leave(id){
    document.getElementById(id).style='background-color:3FFFFFF';
  }



    init();
</script>
<style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      mid-height: 100vh;
    }

    .main {


    padding:8px;
    border:1px solid
    border-radius
    }

    .row {
      display: flex;
    }
    .item{
      display: flex;
      align-items: center;
      margin: 6px;
      padding: 3px;
      border-radius: 3px;
      
    }
    .item:hover{
        background-color:slategrey;
        transform: scale(1,2);
    }
    .item-value{
    flex-grow: 1;
    color: black;
    }
    .item-del{
      color:aliceblue;
      background-color:red;
      border: 0px;
      opacity:0;
    }
    .item:hover .item-del{
      opacity: 1;
    }
    .input{
      padding: 8px;
      outline: none;

    }
    .input:focus{
      box-shadow: 0px 0px 10px royalblue;
      border:2px solid royalblue
    }


  </style>
</html>
